// Alert 提示

.alert {
    display: flex;
    align-items: stretch;
    padding: 1rem 2rem;
    border-radius: 3px;
    margin: 0 0 $grid-gutter-width 0;

    .alert-icon {
        display: flex;
        align-items: center;
        padding: 0 1.25rem 0 0;

        i {
            font-size: 1.2rem;
        }

        &.alert-icon-top {
            align-items: flex-start;
            align-content: stretch;
        }
    }

    .alert-text {
        align-self: center;
        flex-grow: 1;
    }

    .alert-close {
        padding: 0 0 0 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .close {
            text-shadow: none !important;
        }

        i {
            opacity: .8;
            transition: all .3s ease;

            &:hover {
                transition: all .3s ease;
                opacity: 1;
            }
        }
    }

    // 悬浮效果
    &.alert-elevate {
        box-shadow: $e-elevate-shadow-1;
    }

    // 不同的状态色
    @each $name, $color in $e-state-colors {
        &.alert-#{$name} {
            background: e-get($e-state-colors, $name, base);
            border: 1px solid e-get($e-state-colors, $name, base);
            color: e-get($e-state-colors, $name, inverse);

            .alert-icon i,
            .alert-close i,
            .alert-text {
                color: e-get($e-state-colors, $name, inverse);
            }

            .alert-text hr {
                border-top-color: e-get($e-state-colors, $name, inverse);
                opacity: .4;
            }
        }

        &.alert-outline-#{$name} {
            border: 1px solid e-get($e-state-colors, $name, base);
            color: e-get($e-state-colors, $name, base);

            .alert-icon i,
            .alert-close i,
            .alert-text {
                color: e-get($e-state-colors, $name, base);
            }

        }

        &.alert-solid-#{$name} {
            background: rgba(e-get($e-state-colors, $name, base), .1);
            border-color: transparent;
            color: e-get($e-state-colors, $name, base);

            .alert-icon i,
            .alert-close i,
            .alert-text {
                color: e-get($e-state-colors, $name, base);
            }
        }
    }

    // 次要的提示
    &.alert-secondary {
        .alert-icon {
            i {
                color: e-base-color(label, 2);
            }
        }

        .alert-text {
            color: e-base-color(label, 3);
        }
    }

    // 加粗
    &.alert-bold {
        .alert-text {
            font-weight: 500;
        }
    }
}